<template>
	<view class='container'>
		<view class="head">
			<view class='info'>
				<view class='touxiang'>
					<open-data type="userAvatarUrl"></open-data>
				</view>
				<view class='userInfo'>
					<view class='name'>
						<open-data type="userNickName"></open-data>
					</view>
					<view class='phone' @tap='bindPhone' v-if="phone">手机号码：{{phone}}</view>
					<view class='phone' @tap='bindPhone' v-else>点击添加手机号码</view>
					<view class='wallet' @tap='bindWallet' v-if="wallet">ERC20地址：{{wallet}}</view>
					<view class='wallet' @tap='bindWallet' v-else>点击添加ERC20地址</view>
				</view>
				<view class='kufu'>
					<image src="../../static/assets/lianxiKeFu.png" @tap='kefu'></image>
				</view>
			</view>
		</view>

		<view class='banner'>
			<view class='content'>
				<view class='title' @tap="invite" v-if="inviteNum>0">您已邀请了{{inviteNum}}位好友，点击邀请更多 ></view>
				<view v-if="inviteNum>0">
					<view class='tab'>
						<text class='tabTouxiang'>微信头像</text>
						<text class='tabName'>微信昵称</text>
						<text class='tabTime'>邀请时间</text>
					</view>
					<view class='item' v-for="(item,index) in inviteData" :key="index">
						<view class='itemPhoto'>
							<image :src='item.headUrl ? item.headUrl : localHeadUrl'></image>
						</view>
						<view class='itemInfo'>
							<view class='itemName'>{{item.nickName ? item.nickName : defaultNickName}}</view>
							<view class='itemTime'>{{item.inviteDate}}</view>
						</view>
					</view>
					<view v-if="listLength!=0">
					</view>
					<view v-if="listLength!=0">
						<view class='more' v-if="loading==false" @tap='clickMore'>{{loadMoreTitle}}</view>
						<view class='more' v-else-if="loading==true">正在加载...</view>
					</view>
				</view>
				<view v-else>
					<view class='noPepole'>
						<image src='../../static/assets/info.png' class='noInfo'></image>
						<view class='noSize'>您还未邀请任何好友哦~</view>
					</view>
					<view class='hideInvite_1'>
						<view class='inviteTitle'>赶紧邀请好友一起加入吧！</view>
						<view class='inviteaway'>
							<view class='inviteawayItem'>
								<view class='second'>
									<image src='../../static/assets/erweima.png' @tap='baocun'></image>
								</view>
								<view>二维码邀请</view>
							</view>
							<view class='inviteawayItem'>
								<button open-type="share" class='button'>
									<image src='../../static/assets/wechat.png'></image>
								</button>
								<view>微信邀请</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class='qcodeHide' v-if="isShow" @tap='celInvite'>
			<view class='hideInvite' catchtap="share">
				<view class='inviteTitle'>选择要邀请的方式</view>
				<view class='inviteaway'>
					<view class='inviteawayItem'>
						<view class='second'>
							<image src='../../static/assets/erweima.png' @tap='getqcode'></image>
						</view>
						<view>二维码邀请</view>
					</view>
					<view class='inviteawayItem'>
						<button open-type="share" class='button'>
							<image src='../../static/assets/wechat.png'></image>
						</button>
						<view>微信邀请</view>
					</view>
				</view>
			</view>
		</view>
		<view class='qcodeHide' v-if="isQcodeShow">
			<view class='qcodeContent'>
				<image src='../../static/assets/cancel.png' class='cancelStyle' @tap='cancelStyle'></image>
				<view class='qcodephoto'>
					<image :src='imgUrl'></image>
				</view>
				<view class='sure' @tap='sure'>
					保存
				</view>
			</view>
		</view>
		<view class='qcodeHide' v-if="isKeFuShow">
			<view class='kefuContent'>
				<image src='../../static/assets/cancel.png' class='cancelStyle' @tap='cancelkefu'></image>
				<view class='kefuPhoto'>
					<image src='../../static/assets/userEr.png' @tap="previewImage"></image>
				</view>
				<view style='margin-top:20px;font-size:16px;'>客服小蕊</view>
				<view class='kefuNum' style='margin-top:10px'>微信号：kefu_xr</view>

			</view>
		</view>
		<view class='qcodeHide' v-if="isPhoneShow">
			<view class='phoneContent'>
				<image src='../../static/assets/cancel.png' class='cancelStyle' @tap='cancelPhone'></image>
				<view class='tips'>
					<view class='phoneItemTitle' v-if="phone">更换手机号码</view>
					<view class='phoneItemTitle' v-else>绑定手机号码</view>
					<view class='phoneItemtip' v-if="phone">如果当前手机号码不再使用,请及时更换手机号码,之后可以用新的手机号码登录</view>
				</view>
				<view class='inputView'>
					<view class='inputArea'>
						<image src='../../static/assets/phone.png' class='inputAreaPhone'></image>
						<input class='phoneInput' type='number' maxlength="11" placeholder=" 请输入手机号码" auto-focus @input="bindKeyInput"
						 :value="phone" v-if="phone" />
						<input class='phoneInput' type='number' maxlength="11" placeholder=" 请输入手机号码" auto-focus @input="bindKeyInput"
						 v-else />
					</view>
					<view class='verifyArea'>
						<image src='../../static/assets/yanzhengma.png' class='verifyAreaYan'></image>
						<input class='verifyInput' type='number' maxlength="6" placeholder=" 请输入验证码" @input="bindCodeInput" />
						<view class='verifyCode' @tap='sendSmsAction'>{{countNum == 60 ? '发送验证码' : countNum + '(s)后重发'}}</view>
					</view>
					<view class='bind' @tap='bindPhoneSure'>
						确定
					</view>
				</view>
			</view>
		</view>
		<view class='qcodeHide' v-if="iWalletShow">
			<view class='walletContent'>
				<image src='../../static/assets/cancel.png' class='cancelStyle' @tap='cancelWallet'></image>
				<view class='walletTitle' v-if="wallet">更换ERC20地址</view>
				<view class='walletTitle' v-else>添加ERC20地址</view>
				<view class='inputArea_1'>
					<image src='../../static/assets/walletAdress.png' class='inputAreaWallet'></image>
					<input class='phoneInput' placeholder=" 请输入您的ERC20地址" auto-focus @input="bindKeyWallet" :value="wallet" v-if="wallet" />
					<input class='phoneInput' placeholder=" 请输入您的ERC20地址" auto-focus @input="bindKeyWallet" v-else />
					<view class='bind_1' @tap='bindWalletFun'>
						确定
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import api from '../../common/apis.js'
	import message from '../../common/message.js'
	import util from '../../common/util.js'
	export default {
		data() {
			return {
				isSaveIma: false,
				isShow: false,
				isQcodeShow: false,
				isKeFuShow: false,
				isPhoneShow: false,
				iWalletShow: false,
				inviteNum: 0,
				countNum: 60,
				phoneValue: null,
				verifyCode: null,
				walletAddress: null,
				listLength: 1,
				size: 20,
				pageNum: 0,
				loadMoreTitle: '点击加载更多',
				userId: null,
				userNickName: '',
				defaultNickName: '***',
				loading: false,
				imgUrl: null,
				phone: "",
				wallet: "",
				inviteData: [],
				imgalist: ["http://www.valuechain.group/template/userEr.png"],
				localHeadUrl: '../../static/assets/logo.jpg',
				///////授权
				userInfo: {},
				hasUserInfo: false,
				canIUse: uni.canIUse("button.open-type.getUserInfo"),
				touchStart: null,
				touchEnd: null
			}
		},
		onReady: function() {
			this.animation = uni.createAnimation()
		},
		onShow: function() {
			this.inviteData = []
			this.invition(0, 6);
			this.getbaseInfo();
		},
		onShareAppMessage: function(res) {
			if (res.from === "button") {
				// 来自页面内转发按钮
				console.log(res.target);
			}
			return {
				title: this.userNickName + '邀你一起加入星空矿机',
				path: "/pages/index/index?inviteUserId=" + this.userId,
				imageUrl: '../../static/assets/shareImage.png'
			};
		},
		methods: {
			///////////获取用户的个人信息//////////
			getbaseInfo() {
				let token = uni.getStorageSync("authorization");
				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: api.getBaseInfoApi,
					method: "GET",
					header: {
						Authorization: "Bearer " + token
					},
					success: res => {
						uni.hideLoading();
						if (res.statusCode == 200) {
							let cashWallet = res.data.cashWallet;
							if (cashWallet) {
								let len = cashWallet.length;
								let a = cashWallet.slice(0, 8);
								let b = cashWallet.slice(len - 8, len);
								let wallet_1 = a + "..." + b;
								this.wallet = wallet_1;
							}
							if (res.data.mobile && res.data.mobile != 'null') {
								this.phone = res.data.mobile;
								this.isPhoneShow = false;
							} else {
								this.isPhoneShow = true
							}
							if (res.data.userId) {
								this.userId = res.data.userId
							}

							if (res.data.nickname) {
								this.userNickName = res.data.nickname
							}
						} else {
							if (res.data.title == 'Unauthorized') {
								uni.redirectTo({
									url: '/pages/login/login'
								})
								return
							} else {
								message.showInfo(
									res.data.message ? res.data.message : "网络连接异常"
								);
							}
						}
					}
				});
			},
			//////////获取用户的邀请信息//////////
			/////////分页///////////
			clickMore() {
				this.loading = true
				this.pageNum++;
				this.invition(this.pageNum);
			},
			/////////邀请明细///////
			invition(page) {
				let token = uni.getStorageSync("authorization");
				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: api.inviteInfo + "?size=" + this.size + "&page=" + page,
					method: "GET",
					header: {
						Authorization: "Bearer " + token
					},
					success: res => {
						uni.hideLoading();
						if (res.statusCode == 200) {
							let total = res["header"]["X-Total-Count"];
							if (res.data.length == 0) {
								this.loadMoreTitle = '无更多数据'
							}
							if (res.data) {
								let temp = [];
								this.inviteData.forEach(element => {
									temp.push(element);
								});
								res.data.forEach(element => {
									if (element.inviteDate) {
										element.inviteDate = element.inviteDate.substring(0, 10)
									}
									if (element.nickName) {

									} else {
										element.nickName = ''
									}
									temp.push(element);
								});
								this.listLength = total
								this.loading = false;
								this.inviteNum = total;
								this.inviteData = temp;
							} else {
								this.listLength = total
								this.loading = false;
								this.inviteNum = total;
							}
						} else {
							util.errHandler(res)
						}
					}
				});
			},

			///////////////////绑定事件//////////
			/////////绑定手机号/////
			//发送验证码
			sendSmsAction: function() {
				if (!this.phoneValue) {
					uni.showToast({
						title: "手机号不能为空",
						icon: "",
						image: "/images/logo/warning.png",
						duration: 2000
					});
					return;
				}

				if (this.phoneValue.length != 11) {
					uni.showToast({
						title: "手机号不正确",
						icon: "",
						image: "/images/logo/warning.png",
						duration: 2000
					});
					return;
				}

				let param = {
					mobile: this.phoneValue
				};

				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: api.sendSmsCode,
					method: "POST",
					data: param,
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					success: res => {
						uni.hideLoading();
						message.showSuccess("验证码已发送");
						if (res.statusCode == "200") {
							let temp = setInterval(() => {
								if (this.countNum == 0) {
									this.countNum = 60
									this.countText = "发送验证码"
									if (
										this.intervalNum != null &&
										this.intervalNum != undefined
									) {
										clearInterval(this.intervalNum);
									}
								} else {
									let num2 = this.countNum;
									num2 -= 1;
									this.countNum = num2
								}
							}, 1000);

							this.intervalNum = temp
						} else {
							message.showInfo(
								res.data.message ? res.data.message : "网络连接异常"
							);
						}
					}
				});
			},
			bindPhoneSure() {
				let token = uni.getStorageSync("authorization");

				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: api.bindPhoneApi +
						"?mobile=" +
						this.phoneValue +
						"&smsCode=" +
						this.verifyCode,
					method: "POST",
					// data: param,
					header: {
						Authorization: "Bearer " + token
					},
					success: res => {
						uni.hideLoading();
						if (res.statusCode == 200) {
							uni.showToast({
								title: "已绑定手机"
							});
							this.isPhoneShow = false

							let token = res.data.id_token;
							try {
								uni.setStorageSync("authorization", token);
							} catch (e) {
								console.log(e);
							}

							this.getbaseInfo();
						} else {
							if (res.data.title == 'Unauthorized') {
								uni.redirectTo({
									url: '/pages/login/login'
								})
								return
							} else {
								message.showInfo(
									res.data.message ? res.data.message : "网络连接异常"
								);
							}
						}
					}
				});
			},
			///////绑定钱包地址/////
			bindWalletFun() {
				let token = uni.getStorageSync("authorization");
				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: api.bindWalletApi + "?wallet=" + this.walletAddress,
					method: "POST",
					header: {
						Authorization: "Bearer " + token
					},
					success: res => {
						uni.hideLoading();
						if (res.statusCode == 200) {
							let len = this.walletAddress.length;
							let a = this.walletAddress.slice(0, 8);
							let b = this.walletAddress.slice(len - 8, len);
							let wallet_1 = a + "..." + b;
							this.wallet = wallet_1
							this.iWalletShow = false

						} else {
							util.errHandler(res)
						}
					}
				});
			},
			///////////////////图片的保存//////////
			/////////生成二维码/////
			getqcode() {
				this.isQcodeShow = true
				let token = uni.getStorageSync("authorization");
				uni.showLoading({
					title: "加载中"
				});

				uni.request({
					url: api.getQcodeApi + "?scene=" + this.userId + "&width=" + 320,
					method: "GET",
					header: {
						Authorization: "Bearer " + token
					},
					success: res => {
						if (res.statusCode == 200) {
							this.imgUrl = "data:image/png;base64," + res.data;
							uni.hideLoading();
						} else {
							util.errHandler(res)
						}
					}
				});
			},
			////////展示二维码图片///
			baocun() {
				this.isShow = false
				this.isQcodeShow = true
				this.getqcode();
			},
			////////保存二维码图片///
			sure() {
				let self=this
				console.log(this.imgUrl)
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success(){
						var aa = wx.getFileSystemManager();
						aa.writeFile({
							filePath: wx.env.USER_DATA_PATH + "/test.png",
							data: self.imgUrl.slice(22),
							encoding: "base64",
							success: res => {
								wx.saveImageToPhotosAlbum({
									filePath: wx.env.USER_DATA_PATH + "/test.png",
									success: function(res) {
										uni.showToast({
											title: "已成功保存到相册"
										});
									},
									fail: function(err) {
										uni.showToast({
											title: "请前往小程序设置更改授权项",
											icon: 'none'
										});
									}
								});
							},
							fail: err => {
								console.log(err);
							}
						});
					}
				})
			},
			///////客服图片/////
			/////长按保存//////
			touchStart: function(e) {
				this.touchStart = e.timeStamp;
			},
			touchEnd: function(e) {
				this.touchEnd = e.timeStamp
			},
			saveImg: function() {
				this.isSaveIma = true
				this.animation.translateY(-60).step();
				this.animation = this.animation.export()
			},
			previewImage: function(e) {
				uni.previewImage({
					current: this.imgalist, // 当前显示图片的http链接
					urls: this.imgalist // 需要预览的图片http链接列表
				});
			},
			//////点击保存////
			save() {
				var imgSrc = "http://www.valuechain.group/template/userEr.png";
				uni.downloadFile({
					url: imgSrc,
					success: function(res) {
						console.log(res);
						//图片保存到本地
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(data) {
								uni.showToast({
									title: "保存成功",
									icon: "success",
									duration: 2000
								});
								this.setData({
									isKeFuShow: false
								});
							},
							fail: function(err) {
								console.log(err);
								if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
									console.log("当初用户拒绝，再次发起授权");
									uni.openSetting({
										success(settingdata) {
											console.log(settingdata);
											if (settingdata.authSetting["scope.writePhotosAlbum"]) {
												console.log(
													"获取权限成功，给出再次点击图片保存到相册的提示。"
												);
											} else {
												console.log(
													"获取权限失败，给出不给权限就无法正常使用的提示"
												);
											}
										}
									});
								}
							},
							complete(res) {
								console.log(res);
							}
						});
					}
				});
			},
			///////////////////////////////////////////////页面逻辑交互///////////////////
			invite() {
				this.isShow = true
			},
			celSaveImag() {
				this.isSaveIma = false
			},
			celInvite() {
				this.isShow = false
			},
			cancelStyle() {
				this.isQcodeShow = false
			},
			//点击查看客服
			kefu() {
				this.isKeFuShow = true
			},
			cancelkefu() {
				this.isKeFuShow = false
			},
			bindPhone() {
				this.isPhoneShow = true
				if (this.phone) {
					this.phoneValue = this.phone
				}
			},
			bindWallet() {
				this.iWalletShow = true
			},
			cancelPhone() {
				this.isPhoneShow = false
			},
			cancelWallet() {},
			cancelPhone() {
				this.isPhoneShow = false
			},
			cancelWallet() {
				this.iWalletShow = false
			},

			//监听手机号码的输入
			bindKeyInput: function(e) {
				this.phoneValue = e.detail.value
			},
			//监听验证码的输入
			bindCodeInput: function(e) {
				this.verifyCode = e.detail.value
			},
			//绑定钱包地址
			bindKeyWallet: function(e) {
				this.walletAddress = e.detail.value
			},
		}
	}
</script>

<style>
	.container {
		margin: 0;
		padding: 0;
	}

	.head {
		width: 100%;
		background: white;
		height: 120px;
	}

	.info {
		width: 92.57%;
		height: 100px;
		margin: 0 auto;
		border-radius: 10px;
		position: relative;
		border: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow: -5px 5px 10px -4px #e8e5ee, 5px 5px 10px -4px #e8e5ee;
	}

	.kufu {
		width: 20px;
		height: 20px;
		position: absolute;
		top: 15px;
		right: 15px;
	}

	.kufu image {
		width: 100%;
		height: 100%;
	}

	.touxiang {
		width: 52px;
		height: 52px;
		position: absolute;
		top: 50%;
		margin-top: -26px;
		margin-left: 13px;
	}

	.touxiang image {
		width: 52px;
		height: 52px;
	}

	.userInfo {
		position: absolute;
		top: 50%;
		margin-top: -29px;
		margin-left: 76px;
		color: #b1b1b1;
		padding: 0px;
	}

	.name {
		font-size: 12px;
		margin-top: 0px;
	}

	.phone {
		height: 13px;
		line-height: 13px;
		font-size: 10px;
		border: 1px solid #b1b1b1;
		border-radius: 6.5px;
		margin-top: 8px;
		padding: 0 7px;
	}

	.wallet {
		height: 13px;
		line-height: 13px;
		font-size: 10px;
		border: 1px solid #b1b1b1;
		border-radius: 6.5px;
		margin-top: 8px;
		padding: 0 7px;
	}

	.banner {
		background: #eee;
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		top: 110px;
		bottom: 0;
	}

	.content {
		width: 92.57%;
		margin: 0 auto;
		padding-top: 20px;
	}

	.button {
		display: block;
		width: 60px;
		height: 60px;
		background: white;
		padding: 0;
		margin-bottom: 5px;
	}

	.second {
		margin: 0 auto;
		width: 60px;
		height: 60px;
		border-radius: 10px;
		margin-bottom: 5px;
		overflow: hidden;
	}

	.title {
		font-size: 14px;
		color: #234f7c;
	}

	.tab {
		height: 52px;
		padding-left: 13px;
		padding-right: 12px;
	}

	.tabTouxiang {
		float: left;
		width: 77px;
		line-height: 52px;
	}

	.tabName {
		width: 135px;
		text-align: center;
		float: left;
		line-height: 52px;
	}

	.tabTime {
		float: right;
		width: 77px;
		line-height: 52px;
	}

	.item {
		padding-left: 20px;
		height: 52px;
		align-items: center;
		display: flex;
	}

	.itemPhoto {
		width: 42px;
		height: 42px;
		border-radius: 2px;
	}

	.itemPhoto image {
		width: 100%;
		height: 100%;
	}

	.itemInfo {
		margin-left: 10px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
		width: 277px;
		height: 52px;
		padding-right: 5px;
	}

	.itemTime {
		width: 110px;
		float: right;
		line-height: 52px;
	}

	.itemName {
		width: 135px;
		text-align: center;
		float: left;
		line-height: 52px;
		margin-left: 18px;
	}

	.hide {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #d9d9d9;
		opacity: 0.8;
		height: 100%;
		z-index: 999;
	}

	.hideInvite {
		width: 92.57%;
		height: 147px;
		background: white;
		border-radius: 10px;
		position: fixed;
		bottom: 20px;
		left: 50%;
		margin-left: -173.5px;
		font-weight: bold;
		background-clip: padding-box;
	}

	.hideInvite_1 {
		width: 92.57%;
		height: 132px;
		border-radius: 10px;
		font-weight: bold;
		margin-top: 60px;
	}

	.inviteTitle {
		text-align: center;
		margin-top: 20px;
		font-size: 14px;
	}

	.inviteaway {
		width: 210px;
		margin: 0 auto;
		font-size: 14px;
		margin-top: 10px;
		text-align: center;
		display: flex;
		justify-content: space-between;
	}

	.inviteawayItem image {
		width: 100%;
		height: 100%;
	}

	.noPepole {
		margin-top: 60px;
		text-align: center;
	}

	.noSize {
		font-size: 14px;
		margin-top: 10px;
		font-weight: bold;
	}

	.noInfo {
		width: 47px;
		height: 47px;
	}

	.qcodeHide {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(217, 217, 217, 0.9);
		height: 100%;
		z-index: 1000;
	}

	.qcodeContent {
		position: relative;
		width: 92.57%;
		height: 377px;
		background: #fff;
		border-radius: 10px;
		margin: 14px auto;
		opacity: 1;
		background-clip: padding-box;
	}

	.cancelStyle {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 24px;
		height: 24px;
	}

	.qcodephoto {
		width: 157px;
		height: 157px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -78.5px;
		margin-top: -78.5px;
	}

	.qcodephoto image {
		width: 100%;
		height: 100%;
	}

	.sure {
		position: absolute;
		bottom: 40px;
		left: 50%;
		margin-left: -110px;
		width: 220px;
		height: 24px;
		text-align: center;
		line-height: 24px;
		color: white;
		background: #366690;
		border-radius: 5px;
		font-size: 14px;
	}

	.kefuContent {
		position: relative;
		width: 92.57%;
		height: 405px;
		background: #fff;
		border-radius: 10px;
		margin: 14px auto;
		background-clip: padding-box;
		font-weight: bold;
		text-align: center;
		font-size: 14px;
		overflow: hidden;
	}

	.kefuPhoto {
		font-size: 16px;
		width: 157px;
		height: 157px;
		margin: 0 auto;
		margin-top: 90px;
	}

	.kefuPhoto image {
		width: 100%;
		height: 100%;
	}

	.kefuNum {
		text-align: center;
		margin-top: 15px;
	}

	.phoneContent {
		position: relative;
		width: 92.57%;
		height: 308px;
		background: #fff;
		border-radius: 10px;
		margin: 14px auto;
		background-clip: padding-box;
		font-size: 16px;
		overflow: hidden;
		margin-top: 133px;
	}

	.phoneItemTitle {
		font-weight: bold;
		margin-top: 65px;
		margin-left: 32px;
		margin-bottom: 10px;
	}

	.phoneItemtip {
		font-weight: bold;
		font-size: 12px;
		margin-left: 32px;
		margin-bottom: 10px;
	}

	.inputView {
		width: 95%;
		margin: 0 auto;
		color: #999;
	}

	.inputArea {
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
		display: flex;
		align-items: center;
		height: 45px;
	}

	.inputAreaPhone {
		margin-left: 10%;
		width: 23px;
		height: 23px;
	}

	.phoneInput {
		margin-left: 20px;
		height: 23px;
	}

	.walletTitle {
		font-size: 18px;
	}

	.verifyInput {
		margin-left: 20px;
		height: 23px;
		width: 150px;
	}

	.verifyArea {
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
		display: flex;
		align-items: center;
		height: 45px;
	}

	.verifyAreaYan {
		margin-left: 10%;
		width: 23px;
		height: 23px;
	}

	.verifyCode {
		font-size: 14px;
		width: 85px;
		height: 20px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		text-align: center;
		color: #999;
	}

	.bind {
		position: absolute;
		bottom: 34px;
		left: 50%;
		margin-left: -110px;
		width: 220px;
		height: 24px;
		text-align: center;
		line-height: 24px;
		color: white;
		background: #366690;
		border-radius: 5px;
		font-size: 14px;
	}

	.walletContent {
		position: relative;
		width: 87%;
		height: 162px;
		background: white;
		border-radius: 10px;
		margin: 14px auto;
		background-clip: padding-box;
		font-size: 16px;
		overflow: hidden;
		margin-top: 191px;
		left: 50%;
		top: 50%;
		margin-left: -48%;
		margin-top: -95px;
		padding-top: 28px;
		padding-left: 28px;
	}

	.inputArea_1 {
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
		display: flex;
		align-items: center;
		height: 45px;
		width: 320px;
		margin: 0 auto;
		margin-top: 20px;
	}

	.bind_1 {
		position: absolute;
		bottom: 24px;
		left: 50%;
		margin-left: -136.5px;
		width: 273px;
		height: 24px;
		text-align: center;
		line-height: 24px;
		color: white;
		background: #366690;
		border-radius: 5px;
		font-size: 14px;
	}

	.more {
		text-align: center;
		margin-top: 10px;
		color: #999;
		font-size: 14px;
	}

	.saveImage {
		width: 100%;
		background: white;
		height: 60px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		font-size: 14px;
		color: rgba(0, 0, 0, 0.5);
		position: absolute;
		bottom: -60px;
	}

	.wrap {
		width: 100px;
		height: 60px;
		margin-left: 20px;
	}

	.saveImgHide {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.7);
		height: 100%;
		z-index: 1000;
	}

	.wrapItem {
		height: 60px;
		width: 300px;
		line-height: 60px;
	}

	.inputAreaWallet {
		margin-left: 20px;
		width: 23px;
		height: 23px;
	}
</style>
